<template>
  <div class="money-list">
    <a-card class="money-list-info">
      <div style="font-weight: bold;font-size: 16px;color: #1aa51a;margin: 6px 0;">提成管理说明</div>
      <div>
        <p>1. 基本工资记录的为维修工每月获得基本工资的计算规则。</p>
        <p>2. 岗位工资记录的为维修工每月获得相应维修类型的提成。</p>
        <p>3. 员工每月的工资构成: <i><b>当前阶段基本工资之和 + 岗位工资</b></i>。</p>
      </div>
      <div style="font-weight: bold;font-size: 16px;color: #e5125a;margin: 6px 0;">温馨提示</div>
      <div>
        <p>1. 维修工的工资由基本工资和岗位工资后台计算获得，请谨慎修改。</p>
        <p>2. 删除的各项数据将无法复原，请谨慎操作。</p>
        <p>3. 基本工资和岗位工资仅有高级管理员方可修改。</p>
      </div>
    </a-card>
    <br>
    <a-card title="详细数据"
            class="money-list-table">
      <div slot="extra">
        <a-button type="primary" @click="addModel">
          <a-icon type="plus" />新增
        </a-button>
      </div>
      <a-tabs default-active-key="basicSalary" @change="tabsChange">
        <a-tab-pane key="basicSalary">
          <span slot="tab">
            <a-icon type="money-collect" />基本工资</span>
            <!-- 表格数据 -->
            <a-table
              rowKey="id"
              bordered
              :columns="basicSalaryColumns"
              :data-source="basicSalaryData"
              :pagination="false"
              :loading="basicLoading"
            >
              <template slot="id" slot-scope="text, record, index">
                {{ index + 1 }}
              </template>
              <template slot="workTime" slot-scope="text, record">
                {{ `${record.start} ~ ${record.end}` }}
              </template>
              <template slot="operation" slot-scope="text, record">
                <a-button
                    shape="circle"
                    type="primary"
                    style="margin-right: 10px;"
                    @click="editDrawer(record)">
                  <a-icon type="edit" />
                </a-button>
                <a-button
                    shape="circle"
                    type="danger"
                    @click="deleteModal(record)">
                  <a-icon type="delete" />
                </a-button>
              </template>
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="insertSalary">
          <span slot="tab">
            <a-icon type="pay-circle" />岗位工资</span>
            <!-- 表格数据 -->
            <a-table 
              rowKey="id"
              bordered
              :columns="insertSalaryColumns"
              :data-source="insertSalaryData"
              :loading="insertLoading"
              :pagination="false"
            >
              <template slot="id" slot-scope="text, record, index">
                {{ index + 1 }}
              </template>
              <template slot="operation" slot-scope="text, record">
                <a-button
                    shape="circle"
                    type="primary"
                    style="margin-right: 10px;"
                    @click="editDrawer(record)">
                  <a-icon type="edit" />
                </a-button>
                <a-button
                    shape="circle"
                    type="danger"
                    @click="deleteModal(record)">
                  <a-icon type="delete" />
                </a-button>
              </template>
            </a-table>
        </a-tab-pane>
      </a-tabs>
    </a-card>
    <!-- 新增/编辑 -->
    <a-drawer :title="salaryType === 'basic' ? '编辑数据(基本工资)' : '编辑数据(岗位工资)' "
              placement="right"
              :visible="drawerVisible"
              :width="480"
              @close="cancelForm">
      <!-- 基本工资编辑表单 -->
      <a-form-model ref="basicForm"
                    :model="basicForm"
                    :rules="addBasicRules"
                    :label-col="{ span: 6 }"
                    :wrapper-col="{ span: 16 }"
                    v-show="salaryType === 'basic'">
        <a-form-model-item label="入职时长" prop="startTime">
          <a-input-number v-model="basicForm.start"
                          placeholder="起始年份"
                          :min="0"
                          style="width: calc(50% - 8px);"></a-input-number>
          &nbsp;&nbsp;-&nbsp;&nbsp;
          <a-input-number v-model="basicForm.end"
                          placeholder="终止年份"
                          :min="1"
                          style="width: calc(50% - 8px);"></a-input-number>
        </a-form-model-item>
        <a-form-model-item label="阶段底薪" prop="baseSalary">
          <a-input v-model="basicForm.baseSalary" prefix="￥" suffix="元"></a-input>
        </a-form-model-item>
        <a-form-model-item label="用餐补贴" prop="mealAllowance">
          <a-input v-model="basicForm.mealAllowance" prefix="￥" suffix="元"></a-input>
        </a-form-model-item>
        <a-form-model-item label="高温补贴" prop="temperatureAllowance">
          <a-input v-model="basicForm.temperatureAllowance" prefix="￥" suffix="元"></a-input>
        </a-form-model-item>
        <a-form-model-item label="月度考勤考核" prop="monthCheck">
          <a-input v-model="basicForm.monthCheck" prefix="￥" suffix="元"></a-input>
        </a-form-model-item>
        <a-form-model-item label="季度考勤考核" prop="seasonCheck">
          <a-input v-model="basicForm.seasonCheck" prefix="￥" suffix="元"></a-input>
        </a-form-model-item>
        <a-form-model-item label="评分1-2分" prop="scoreOne">
          <a-input v-model="basicForm.scoreOne" prefix="￥" suffix="元"></a-input>
        </a-form-model-item>
        <a-form-model-item label="评分2-3分" prop="scoreTwo">
          <a-input v-model="basicForm.scoreTwo" prefix="￥" suffix="元"></a-input>
        </a-form-model-item>
        <a-form-model-item label="评分3-4分" prop="scoreThree">
          <a-input v-model="basicForm.scoreThree" prefix="￥" suffix="元"></a-input>
        </a-form-model-item>
        <a-form-model-item label="评分4-5分" prop="scoreFour">
          <a-input v-model="basicForm.scoreFour" prefix="￥" suffix="元"></a-input>
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 24 }" style="text-align:center;">
          <a-button style="margin-right: 10px;" @click="cancelForm">取消</a-button>
          <a-button type="primary" @click="confirmForm">确认</a-button>
        </a-form-model-item>
      </a-form-model>
      <!-- 岗位工资新增表单 -->
      <a-form-model ref="insertForm"
                    :model="insertForm"
                    :rules="addInsertRules"
                    :label-col="{ span: 6 }"
                    :wrapper-col="{ span: 16 }"
                    v-show="salaryType === 'insert'">
        <a-form-model-item label="工作岗位类型" prop="work">
          <a-input v-model="insertForm.work" placeholder="请输入岗位类型"></a-input>
        </a-form-model-item>
        <a-form-model-item label="岗位工资" prop="workSalary">
          <a-input v-model="insertForm.workSalary" placeholder="请输入岗位工资"></a-input>
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 24 }" style="text-align:center;">
          <a-button style="margin-right: 10px;" @click="cancelForm">取消</a-button>
          <a-button type="primary" @click="confirmForm">确认</a-button>
        </a-form-model-item>
      </a-form-model>
    </a-drawer>
    <!-- 删除 -->
    <a-modal v-model="deleteModelVisible"
             :footer="null"
             title="删除数据">
      <div>确定删除此条数据吗？<br>删除后的数据将无法复原，请谨慎操作！</div>
      <div style="text-align: center;margin-top: 20px;">
        <a-button style="margin-right: 10px;" @click="cancelDelete">取消</a-button>
        <a-button type="primary" @click="confirmDelete">确认</a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
  import {
    getBasicSalary,
    addBasicSalary,
    editBasicSalary,
    deleteBasicSalary,
    getInsertSalary,
    addInsertSalary,
    editInsertSalary,
    deleteInsertSalary,
  } from '@/api/api';
  export default {
    name: "MoneyList",
    data() {
      return {
        salaryType: 'basic',
        currentType: 'add',
        basicLoading: false,
        basicSalaryColumns: [
          {title: '序号', dataIndex: 'id', key: 'id', width: 80, scopedSlots: { customRender: 'id' }},
          {title: '入职时长(/年)', dataIndex: 'workTime', key: 'workTime', width: 120, scopedSlots: { customRender: 'workTime' }},
          {title: '阶段底薪(/元)', dataIndex: 'baseSalary', key: 'baseSalary', width: 120},
          {title: '用餐补贴(/元)', dataIndex: 'mealAllowance', key: 'mealAllowance'},
          {title: '高温补贴(/元)', dataIndex: 'temperatureAllowance', key: 'temperatureAllowance'},
          {title: '月度考勤考核(/元)', dataIndex: 'monthCheck', key: 'monthCheck'},
          {title: '季度考勤考核(/元)', dataIndex: 'seasonCheck', key: 'seasonCheck'},
          {
            title: '综合评分数据',
            children: [
              {title: '4-5分', dataIndex: 'scoreFour', key: 'scoreFour'},
              {title: '4-3分', dataIndex: 'scoreThree', key: 'scoreThree'},
              {title: '3-2分', dataIndex: 'scoreTwo', key: 'scoreTwo'},
              {title: '2-1分', dataIndex: 'scoreOne', key: 'scoreOne'},
            ]
          },
          {title: '操作', dataIndex: 'operation', key: 'operation', width: 120, scopedSlots: { customRender: 'operation' }},
        ],
        basicSalaryData: [],
        insertLoading: false,
        insertSalaryColumns: [
          {title: '序号', dataIndex: 'id', key: 'id', scopedSlots: { customRender: 'id' }, width: 80},
          {title: '岗位类型', dataIndex: 'work', key: 'work'},
          {title: '岗位工资(/元)', dataIndex: 'workSalary', key: 'workSalary'},
          {title: '操作', dataIndex: 'operation', key: 'operation', scopedSlots: { customRender: 'operation' }, width:120},
        ],
        insertSalaryData: [],
        modalVisible: false,
        drawerVisible: false,
        deleteModelVisible: false,
        addBasicRules: {
          start: [{required: true, trigger: 'change', message: '请输入入职起始年份'}],
          end: [{required: true, trigger: 'change', message: '请输入入职终止年份'}],
          baseSalary: [{required: true, trigger: 'change', message: '请输入阶段底薪'}],
          mealAllowance: [{required: true, trigger: 'change', message: '请输入用餐补贴'}],
          temperatureAllowance: [{required: true, trigger: 'change', message: '请输入高温补贴'}],
          monthCheck: [{required: true, trigger: 'change', message: '请输入月度考勤考核'}],
          seasonCheck: [{required: true, trigger: 'change', message: '请输入季度考勤考核'}],
          scoreOne: [{required: true, trigger: 'change', message: '请输入综合评分1-2分数据'}],
          scoreTwo: [{required: true, trigger: 'change', message: '请输入综合评分2-3分数据'}],
          scoreThree: [{required: true, trigger: 'change', message: '请输入综合评分3-4分数据'}],
          scoreFour: [{required: true, trigger: 'change', message: '请输入综合评分4-5分数据'}],
        },
        addInsertRules: {
          type: [{required: true, trigger: 'change', message: '请输入岗位类型'}],
          wage: [{required: true, trigger: 'change', message: '请输入岗位工资'}]
        },
        basicForm: {
          id: '',
          start: '', //起始年份
          end: '', //终止年份
          baseSalary: '', //底薪
          mealAllowance: '', //餐补
          temperatureAllowance: '', //高温补贴
          monthCheck: '', //月度考勤考核
          seasonCheck: '', //季度考勤考核
          scoreOne: '', //1-2分
          scoreTwo: '', //2-3分
          scoreThree: '', //3-4分
          scoreFour: '', //4-5分
        },
        insertForm: {
          id: '',
          work: '',
          workSalary: '',
        },
        deleteBasicId: '',
        deleteInsertId: '',
      }
    },
    methods: {
      /**
       * 获取基本工资数据
       */
      getBasicSalaryInfo() {
        this.basicLoading = true;
        getBasicSalary()
          .then(res => {
            let data = res.data;
            this.basicSalaryData = data;
          })
          .catch(err => {
            this.$message.error(err.data);
          })
          .finally(() => {
            this.basicLoading = false;
          })
      },
      /**
       * 获取岗位工资数据
       */
      getInsertSalaryInfo() {
        this.insertLoading = true;
        getInsertSalary()
          .then(res => {
            let data = res.data;
            this.insertSalaryData = data;
          })
          .catch(err => {
            this.$message.error(err.data);
          })
          .finally(() => {
            this.insertLoading = false;
          })
      },
      /**
       * 添加框打开
       */
      addModel() {
        this.drawerVisible = true;
        this.currentType = 'add';
      },
      /**
       * 确认新增/编辑
       */
      confirmForm() {
        if (this.salaryType === 'basic') {
          this.$refs.basicForm.validate(valid => {
            if (valid) {
              if (this.currentType === 'edit') {
                editBasicSalary(this.basicForm)
                .then(() => {
                  this.$message.success('编辑基本工资列表成功');
                  this.drawerVisible = false;
                  this.$refs['basicForm'].resetFields();
                  this.basicForm.start = this.basicForm.end = '';
                  this.getBasicSalaryInfo();
                })
                .catch(err => {
                  this.$message.error(`编辑基本工资列表失败，${err.data}`);
                })
              } else {
                delete this.basicForm['id'];
                addBasicSalary(this.basicForm)
                  .then(res => {
                    this.$message.success('新增基本工资列表成功');
                    this.$refs['basicForm'].resetFields();
                    this.basicForm.start = this.basicForm.end = '';
                    this.drawerVisible = false;
                    this.getBasicSalaryInfo();
                  })
                  .catch(err => {
                    this.$message.error(`新增基本工资列表失败，${err.data}`);
                  })
              }
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        }else if (this.salaryType === 'insert') {
          this.$refs['insertForm'].validate(valid => {
            if (valid) {
              if (this.currentType === 'add') {
                delete this.insertForm['id'];
                addInsertSalary(this.insertForm)
                  .then(res => {
                    this.$message.success('添加岗位工资数据成功');
                    this.drawerVisible = false;
                    this.$refs['insertForm'].resetFields();
                    this.getInsertSalaryInfo();
                  })
                  .catch(err => {
                    console.log(err);
                    this.$message.error(err.msg);
                  })
              } else {
                editInsertSalary(this.insertForm)
                  .then(res => {
                    this.$message.success('编辑岗位工资数据成功');
                    this.drawerVisible = false;
                    this.$refs['insertForm'].resetFields();
                    this.getInsertSalaryInfo();
                  })
                  .catch(err => {
                    this.$message.error(`编辑岗位工资数据失败,${err.data}`);
                  })
              }
            } else {
              console.log('error submit!!');
              return false;
            }
          })
        }
      },
      /**
       * 取消添加
       */
      cancelForm() {
        this.$refs['basicForm'].resetFields();
        this.basicForm.start = this.basicForm.end = '';
        this.$refs['insertForm'].resetFields();
        this.drawerVisible = false;
      },
      /**
       * tabs页切换
       */
      tabsChange(activeKey) {
        if(activeKey === 'basicSalary') {
          this.salaryType = 'basic';
          this.getBasicSalaryInfo();
        } else if(activeKey === 'insertSalary') {
          this.salaryType = 'insert';
          this.getInsertSalaryInfo();
        }
      },
      /**
       * 编辑框打开
       */
      editDrawer(row) {
        this.drawerVisible = true;
        this.currentType = 'edit';
        if (this.salaryType === 'basic') {
          this.$nextTick(() => {
            this.basicForm = {
              id: row.id,
              start: row.start, //起始年份
              end: row.end, //终止年份
              baseSalary: row.baseSalary, //底薪
              mealAllowance: row.mealAllowance, //餐补
              temperatureAllowance: row.temperatureAllowance, //高温补贴
              monthCheck: row.monthCheck, //月度考勤考核
              seasonCheck: row.seasonCheck, //季度考勤考核
              scoreOne: row.scoreOne, //1-2分
              scoreTwo: row.scoreTwo, //2-3分
              scoreThree: row.scoreThree, //3-4分
              scoreFour: row.scoreFour, //4-5分
            }
          })
        }else if (this.salaryType === 'insert') {
          this.$nextTick(() => {
            this.insertForm = {
              id: row.id,
              work: row.work,
              workSalary: row.workSalary
            }
          })
        }
      },
      /**
       * 打开删除框
       */
      deleteModal(row) {
        this.deleteModelVisible = true;
        if (this.salaryType === 'basic') {
          this.deleteBasicId = row.id;
        }else if (this.salaryType === 'insert') {
          this.deleteInsertId = row.id
        }
      },
      /**
       * 取消删除
       */
      cancelDelete() {
        this.deleteModelVisible = false;
        this.deleteInsertId = '';
        this.deleteBasicId = '';
      },
      /**
       * 确认删除
       */
      confirmDelete() {
        if (this.salaryType === 'basic') {
          deleteBasicSalary({ id: this.deleteBasicId })
            .then(res => {
              this.$message.success('删除成功');
              this.deleteModelVisible = false;
              this.getBasicSalaryInfo();
            })
            .catch(err => {
              this.$message.error(err.data);
            })
        }else if(this.salaryType === 'insert') {
          deleteInsertSalary({ id: this.deleteInsertId })
            .then(res => {
              this.$message.success('删除成功');
              this.deleteModelVisible = false;
              this.getInsertSalaryInfo();
            })
            .catch(err => {
              this.$message.error(err.data);
            })
        }
      },
    },
    mounted() {
      this.getBasicSalaryInfo();
      // this.getInsertSalaryInfo();
    }
  }
</script>

<style lang="scss">
.money-list {
  .money-list-info {
    .ant-card-body {
      padding: 10px 24px;
    }
    p {
      margin-bottom: 2px;
    }
  }
  .money-list-table {
    .ant-table-thead > tr > th {
      text-align: center;
      padding: 8px;
    }
    .ant-card-body {
      padding: 0 24px 24px 24px;
    }
  }
}
</style>